import React, { useState } from 'react'
import { RecordsWrapper, RecordsItremWrapper } from './styleRecords';
import Navbar from "@/components/myComponents/navBar/Navbar"
import Icon from "@/components/icon/Icon"
import Alert from "@/components/myComponents/alert/Alert"

const Records = () => {
    const [nationState, setNationState] = useState(false)
    const [nationData] = useState(["汉族", "回族", "白族"])
    const clickHandlerNation = () => {
        setNationState(!nationState);
    }

    const [cultureState, setCultureState] = useState(false)
    const [cultureData] = useState(["小学", "初中", "高中/大专","大专及以上","不详"])
    const clickHandlerCulture = () => {
        setCultureState(!cultureState);
    }

    const [marryState, setMarryState] = useState(false)
    const [marryData] = useState(["未婚", "已婚", "离异","丧偶","不详"])
    const clickHandlerMarry = () => {
        setMarryState(!marryState);
    }

    return (
        <RecordsWrapper>
            <Alert
                data={nationData}
                alertState={nationState}
                onClick={clickHandlerNation}
                title="请选择签约人"
                footer="取消"
            ></Alert>
            <Alert
                data={cultureData}
                alertState={cultureState}
                onClick={clickHandlerCulture}
                title="请选择文化程度"
                footer="取消"
            ></Alert>
            <Alert
                data={marryData}
                alertState={marryState}
                onClick={clickHandlerMarry}
                title="请选择婚姻程度"
                footer="取消"
            ></Alert>
            <Navbar
                back={true}
                backLink="/My"
                title="健康档案"
                next="保存"
                nextLink="http://www.baidu.com"
            ></Navbar>
            <div className="change_msg">
                <div className="basic_msg">基础信息</div>
                <div className="health_msg">健康信息</div>
            </div>

            <div className="scroll_cont_msg">
                <div className="phone_user">
                    <div>
                        <img src="" alt="" />
                        <Icon
                            name="cameraSwitchLine"
                            size=".2rem"
                            color="#2984f8"
                        ></Icon>
                    </div>
                </div>
                <div className="user_msg">
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>真实姓名</span>
                        <div>王强</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>身份证</span>
                        <div>627457123475837649</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>联系电话</span>
                        <div className="msg_tel">12345928472</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>现居地址</span>
                        <div className="msg_title">请输入现居地址</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>户籍地址</span>
                        <div>北京北京市昌平区</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>行政区划</span>
                        <div>青莲居委会</div>
                    </RecordsItremWrapper>
                </div>

                <div className="detail_msg">
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>性别</span>
                        <div>男</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>出生日期</span>
                        <div>1990-09-08</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>籍贯</span>
                        <div className="msg_title">请输入籍贯</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>民族</span>
                        <div className="msg_title" onClick={clickHandlerNation}>请选择你的民族</div>
                        <Icon
                            name="arrowRightLine"
                            color="#cccccc"
                            size='.2rem'
                        ></Icon>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>文化程度</span>
                        <div className="msg_title" onClick={clickHandlerCulture}>请选择你的文化程度</div>
                        <Icon
                            name="arrowRightLine"
                            color="#cccccc"
                            size='.2rem'
                        ></Icon>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>婚姻状况</span>
                        <div className="msg_title" onClick={clickHandlerMarry}>请选择你的婚姻状况</div>
                        <Icon
                            name="arrowRightLine"
                            color="#cccccc"
                            size='.2rem'
                        ></Icon>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>职业</span>
                        <div className="msg_title">请输入你的职业</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>工作单位</span>
                        <div className="msg_title">请输入工作单位</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>紧急联系人</span>
                        <div className="msg_title">请输入紧急联系人姓名</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>联系人电话</span>
                        <div className="msg_title">请输入紧急联系人电话号码</div>
                    </RecordsItremWrapper>
                </div>

                <div>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>户籍类型</span>
                        <div className="msg_house">
                            <input type="radio" name="house" />
                            <span>农村</span>
                            <input type="radio" name="house" />
                            <span>城市</span>
                        </div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper
                        border={true}
                        borderWidth={'0 0 1px 0'}
                    >
                        <span>定点医疗单位</span>
                        <div className="msg_title msg_spac">请输入定点医疗单位</div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper>
                        <span>费用类型</span>
                        <div className="msg_house">
                            <input type="checkbox" name="personal" />
                            <span>自费</span>
                            <input type="checkbox" name="society" />
                            <span>社会医疗保险</span>
                        </div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper>
                        <span></span>
                        <div className="msg_house">
                            <input type="checkbox" name="shop" />
                            <span>商业保险</span>
                            <input type="checkbox" name="country" />
                            <span>新农合</span>
                        </div>
                    </RecordsItremWrapper>
                    <RecordsItremWrapper>
                        <span></span>
                        <div className="msg_house">
                            <input type="checkbox" name="other" />
                            <span>其他</span>
                        </div>
                    </RecordsItremWrapper>
                </div>
            </div>
        </RecordsWrapper>
    );
}

export default Records;